<template>
  <div class="map-viewer-container">
    <div :id="mapElementId" ref="mapRef" class="map-container">
      <slot></slot>
    </div>
  </div>
</template>
<script>
import OlMap from "@/plugins/slitemap"
import "ol/ol.css"
import { v4 as uuid } from "uuid"

export default {
  components: {},
  props: {
    config: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      mapViewer: undefined,
      mapElementId: null
    };
  },
  watch: {},
  computed: {},
  methods: {
    initMap() {
      this.mapViewer = new OlMap(this.$refs.mapRef, this.config);
      this.$emit("ready", this.mapViewer);
      const mapElement = this.$refs.mapRef;
    }
  },
  created() {
    if (this.mapViewer) {
      // console.log('this.mapViewer', this.mapViewer, this.config)
      this.mapViewer.destroy();
      this.mapViewer.this.mapViewer = undefined;
    }
  },
  mounted() {
    (this.mapElementId = "map" + uuid()), this.initMap();
  }
};
</script>
<style lang="scss" scoped>
.map-viewer-container {
  position: relative;
  height: 100%;

  .map-container {
    height: 100%;
  }

  // ::v-deep .ol-zoom-in, ::v-deep .ol-zoom-out {
  //   display: none;
  // }
}
</style>
